import * as echarts from 'echarts';
import { watchEffect } from 'vue'
const formatData = (data: any) => {
    const arr: any = []
    const legend: any = []
    data.forEach((item: any) => {
        legend.push(item.processStatusName);
        arr.push({
            value: item.count,
            name: item.processStatusName
        })
    })
    return {
        legend: legend,
        data: arr
    }
}
const useComp = (props: any) => {
    const { data, id, title, options = {}, key } = props;
    watchEffect(
        () => {
            const __data = data[key];
            const myChart = echarts.init(document.getElementById(id) as any);
            if (__data) {
                const _data = formatData(__data || {})
                const option = {
                    color: ['#1A89E2', '#E29A02', '#DDD903', '#06F29E', '#21FF63', '#FC5D00', '#d1bc19', '#b5116b', '#c91cd3', '#59b9d7', '#c92c5d'],
                    grid: {
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 100,
                    },
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        bottom: 3,
                        left: "center",
                        data: _data.legend
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center: ['50%', '40%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderColor: 'rgba(0,0,0,0)',
                                borderWidth: 5
                            },
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            data: _data.data
                        }
                    ],
                    ...options
                };
                myChart.setOption(option);
            }
            window.addEventListener('resize', () => {
                myChart.resize();
            })
        }, {
        flush: 'post',
    },);
}

export default useComp;